<template>
  <div>
    <div v-for="item in lists" :key="item._id" class="box">
      <nuxt-link :to="'/detail/'+item._id">
        <a-card hoverable style="width: 240px">
          <img alt="example" :src="item.img" slot="cover" />
          <a-card-meta :title="item.user_name">
            <template slot="description">
              年龄:{{item.age}}
              id:{{item._id}}
              创建时间:{{item.create_time}}
            </template>
          </a-card-meta>
        </a-card>
      </nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    let lists = await $axios.$get("/api/lists");
    console.log("lists", lists);
    return { lists };
  },
  methods: {}
};
</script>

<style>
.box {
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
}

.box img {
  height: 150px;
}
</style>
